import React, { Component } from 'react'
import { Slider, InputNumber, Row, Col, Card } from 'antd';
import { connect } from 'react-redux'
import { update_color } from '../store/actions'
const { Meta } = Card;

const Color = ({ rgb, pupdate_color }) => {
    let labs = ['r', 'g', 'b']
    let color = '#' + rgb.map(c => c.toString(16)).join('')
    return (
        <div>
            <Row>
                <Card style={{ width: 300, backgroundColor: color }}>
                    <Meta
                        title="颜色"
                        description={color}
                    />
                </Card>
            </Row>
            {
                rgb.map((item, i) => (
                    <Row key={i}>
                        <Col>
                            <span>
                                {labs[i]}
                            </span>
                        </Col>
                        <Col span={15}>
                            <Slider
                                min={0}
                                max={255}
                                onChange={(e) => pupdate_color(e, i)}
                                value={typeof item === 'number' ? item : 0}
                            />
                        </Col>
                        <Col span={4}>
                            <InputNumber
                                min={0}
                                max={255}
                                defaultValue={typeof item === 'number' ? item : 0}
                                value={typeof item === 'number' ? item : 0}
                                onChange={(e) => pupdate_color(e, i)}
                            />
                        </Col>
                    </Row>

                ))
            }
        </div>
    )
}

// class Color extends Component {

//     // state = {
//     //     rgb: [255, 255, 255]
//     // }

//     constructor(props){
//         super(props)
//         this.onchange = this.onchange.bind(this)
//     }

//     onchange(number, index){
//         this.props.pupdate_color(number, index)
//         // this.setState(currentState=>{
//         //     let newState = JSON.parse(JSON.stringify(currentState))
//         //     newState.rgb[index] = number
//         //     return newState
//         // })
//     }

//     render() {
//         const { rgb } = this.props.rgb;
//         let labs = ['r', 'g', 'b']
//         let color = '#'+rgb.map(c=>c.toString(16)).join('')
//         return (
//             <div>
//                 <Row>
//                     <Card style={{ width: 300,backgroundColor:color }}>
//                         <Meta
//                             title="颜色"
//                             description={color}
//                         />
//                     </Card>
//                 </Row>
//                 {
//                     rgb.map((item, i) => (
//                         <Row key={i}>
//                             <Col>
//                                 <span>
//                                     {labs[i]}
//                                 </span>
//                             </Col>
//                             <Col span={15}>
//                                 <Slider
//                                     min={0}
//                                     max={255}
//                                     onChange={(e) => this.onchange(e, i)}
//                                     value={typeof item === 'number' ? item : 0}
//                                 />
//                             </Col>
//                             <Col span={4}>
//                                 <InputNumber
//                                     min={0}
//                                     max={255}
//                                     defaultValue={typeof item === 'number' ? item : 0}
//                                     value={typeof item === 'number' ? item : 0}
//                                     onChange={(e) => this.onchange(e, i)}
//                                 />
//                             </Col>
//                         </Row>

//                     ))
//                 }
//             </div>
//         )
//     }
// }

const mapStateToProps = state => {
    return {
        rgb: state.rgb
    }
}

const mapDispatchToProps = dispatch => {
    return {
        pupdate_color: (val, idx) => {
            dispatch(update_color(val, idx))
        }
    }
}

const ColorPanle = connect(mapStateToProps, mapDispatchToProps)(Color)
export default ColorPanle 